<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/myStrategyComment.css" />
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<script src="/js/common.js"></script>
		<script src="../js/plugins/dialog2/dialog.min.js"></script>
		<link rel="stylesheet" href="../js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/chosen/chosen.jquery.js"></script>
		<script>
			$(function () {
                $(function () {
                    //禁用数组参数自动带[]
                    $.ajaxSettings.traditional = true;

                    var params = getParams();
                    var strategyId = params.strategyId;
                    if(!strategyId) {
                        return;
                    }
                    //图片所在的div
                    var rect;

                    $(".rect").click(function () {
                        rect = $(this);
                        if(rect.html().indexOf("img")>-1){
                            //是否删除
                            $.confirm({
                                title:false,
                                content:'是否需要删除?',
                                buttons: {
                                    confirm: {
                                        text: '删除',
                                        btnClass: 'btn-blue',
                                        action: function () {
                                            rect.html('<span>上传</span>');
                                        }
                                    },
                                    cancel: {
                                        text: '取消'
                                    }
                                }
                            })
                        }else{
                            //打开选择图片窗口
                            $('[name=file]').click();
                        }
                    })
                    //上传图片
                    $('[name=file]').change(function () {
                        var img = $("[name=file]").val();
                        if(img){
                            $.ajax({
                                url: '/images/',
                                type: 'post',
                                data: new FormData($('#imgForm')[0]),
                                processData: false,
                                contentType: false,
                                success: function (data) {
                                    if (data.status == 1) {
                                        rect.html("<img width='100%' src='"+data.url+"'/>")
                                    } else {
                                        $(document).dialog({
                                            content: data.msg
                                        });
                                    }
                                }
                            });
                        }
                    });
                    //标签显示
					$.get('/strategyComment/',function (data) {
                        $('.tag').renderValues({list:data});

                    })
                    //评星星等级
                    $(".star i").click(function () {
                        var num = $(this).data('num');
                        var children = $(".star").children("i");
                        $(".star i").removeClass("fa-star").addClass("fa-star-o");
                        for(var i=0;i<num;i++){
                            $(children[i]).addClass("fa-star");
                            $(children[i]).removeClass("fa-star-o");
                        }
                    })
					
                    //提交表单
                    $("#submitBtn").click(function () {
                        //获取评论的相关信息
                        //星星
                        var starNum = $(".fa-star").length;
                        //评价内容
                        var content = $("[name=content]").val();
                        //图片
                        var imgs = $(".imgs img");
                        var imgUrls = "";
                        for(var i=0;i<imgs.length;i++){
                            imgUrls += $(imgs[i]).attr('src')+";";
                        }
                        //标签
                        var arr = new Array()
                        var agt =$('.tag .active input');
                        for(var i=0 ; i<agt.length;i++){
                            arr[i] = $(agt[i]).val();

                        }

                        var comment = {
                            starNum : starNum,
                            content : content,
                            imgUrls : imgUrls,
                            "strategy.id" : strategyId,
                            "tag.tags" : arr
                        };


                        $.post('/strategyComment/'+strategyId+'/comments',comment,function (data) {
                            if(data.success){
                                window.location.href="/mine/strategyComment.html?id="+data.data;
                            }else {
                                $(document).dialog({
                                    content: data.msg
                                });
                            }
                        })
                    })
                })

            })
		</script>



	</head>

	<body>
	<div class="search-head">
		<div class="row nav-search">
			<div class="col">
				<a href="javascript:window.history.go(-1)">
					<span><i class="fa fa-chevron-left" ></i></span>
				</a>

			</div>
			<div class="col">
				<span>点评</span>
			</div>
			<div class="col"></div>
		</div>
	</div>
	<div class="comment">
		<div class="container star">
			<p>你对该旅游地的评价</p>
			<i class="fa fa-star-o fa-lg" data-num="1"></i>
			<i class="fa fa-star-o fa-lg" data-num="2"></i>
			<i class="fa fa-star-o fa-lg" data-num="3"></i>
			<i class="fa fa-star-o fa-lg" data-num="4"></i>
			<i class="fa fa-star-o fa-lg" data-num="5"></i>
		</div>
		<hr />
		<div class="container tag">
			<p>请为该旅游地选择合适的标签（大家都在评）</p>
			<div  >
                <div class="btn-group-toggle" data-toggle="buttons" render-loop="list">
                    <label class="btn btn-outline-danger ">
                        <input type="checkbox" autocomplete="off" render-value="list.id" ><span render-html="list.name"></span>
                    </label>
                </div>
			</div>
			<p>更多评价内容</p>
			<textarea name="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
		</div>

		<div class="container imgs ">
			<p>上传图片</p>
			<div class="row ">
				<form id="imgForm" method="post" enctype="multipart/form-data">
					<input type="file" style="display: none" name="file"/>
				</form>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
				<div class="col-3 rect">
					<span>上传</span>
				</div>
			</div>
		</div>

	</div>
	<div class="operation">
		<button class="btn" onclick="window.history.go(-1)">放弃评价</button>
		<button class="btn" id="submitBtn">提交评价</button>
	</div>
	</body>

</html>